/**
 * Created with JetBrains WebStorm.
 * User: thaidoanhong
 * Date: 4/17/13
 * Time: 10:12 PM
 * To change this template use File | Settings | File Templates.
 */
var PropertyEditor = Class.create({

    initialize: function(caller,selector,title){
        this.selector = selector;
        this.title = title;
        this.caller = caller;
    },


    init: function(){
        var html = "";
        html += "<div class='handler border'>";
        html +=     "<i class='icon-list-alt' style='margin-right: 5px;'></i>";
        html +=     "<b>" + this.title + "</b>";
        html +=     "<i class='icon-remove float-r' style='margin-top:3px;margin-right:-3px;'></i>";
        html += "</div>";
        html += "<div class='datagrid'></div>";


        $j(this.selector).empty();
        $j(this.selector).html(html);
        //   $j(selector).draggable({ containment: "parent", handle: ".handler" });
      //  $j(this.selector + " .handler .icon-remove").click(function () { $jj(selector).hide(); });
        console.log('da init roi');
    },
    reload: function(data){
        var table = document.createElement("table");
        var tbody = document.createElement("tbody");

            for(var k=0; k< data.getSize();k++){

            var tr = document.createElement("tr");
            $j(tr).html(
                    "<td class='property-name'>" + data.attributeList[k].key+ "</td>" +
                    "<td class='property-value'></td>");
                // input html
                var input = document.createElement("input");
                input.type = "text";
                input.value = data.attributeList[k].value ;
                input.size = 20;


            $j(tr).find(".property-value").append($j(input));
            $j(tbody).append($j(tr));

                // on value change handler
                $j(input).change(propertyValueChange);
        }
        // add the header and body to table
        $j(table).append($j(tbody));

        // update innerHTML of parent div
        $j(this.selector + " .datagrid").empty().append($j(table));
        var _this = this;
        function propertyValueChange(e)
        {

            var key = $j(this).parents("tr:first").find(".property-name").html();
            var value = $j(this).val();
//
//            if (this.type == "checkbox") value = this.checked;
//
            _this.onChange({ key: key, value: value });
//            _this.caller.setValueByName(key,value);
//            _this.reload(_this.caller.attributeList);
            console.log("co vao day");
//            if (this.onChange != null)
//            {
//                this.onChange({ key: key, value: value });
//                console.log("co vao day");
//            }

            console.log(key + value);
        }





    },
    hide: function(){
        $j(this.selector).hide();
    },
    show: function(){
        $j(this.selector).show();
    },
    onChange: function(params){
        this.caller.setValueByKey(params.key,params.value);
        this.reload(this.caller.attributeList);
    }
})
